<template functional>
    <div class="contain">
        <svg
            width="650px"
            height="300px"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
        >
            <path id="p1" d="M100,200 L200 200" stroke="none" fill="none" />
            <path id="p2" d="M300,200 L400 200" stroke="none" fill="none" />
            <path id="p3" d="M500,200 L600 200" stroke="none" fill="none" />
            <text class="text" fill="#c0c4cc8a">
                <textPath xlink:href="#p1">4</textPath>
                <textPath xlink:href="#p2">0</textPath>
                <textPath xlink:href="#p3">4</textPath>
            </text>
        </svg>
    </div>
</template>

<script>
export default { functional: true }
</script>

<style lang="scss" scoped>
.contain {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .text {
        font-size: 200px;
    }
}
</style>
